<template>
  <div class="sp">
    <ul>
      <li v-for="(i,index) in list" :key="index" @click="toNextpage5(i)">
        <div class="sp-left">
          <img :src="baseUrl + i.cover_image" alt />
          <div class="publish" v-if="!i.is_publish">
            <img src="../assets/img/jingqing.png" alt />
          </div>
        </div>
        <div class="sp-right">
          <h4>{{i.title}}</h4>
          <div>
            <span>专家：{{i.teacher_name}}</span>
            <span>
              <strong>{{i.count}}</strong>人学习
            </span>
          </div>
          <div>
            <div class="preferential">优惠价￥{{i.price}}</div>
            <div class="normal">原价:￥{{i.refer_price}}</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import userfei from "@/views/Home.vue";
export default {
  name: "shiping",
  props: {
    list: {
      type: Array
    },
    baseUrl: {
      type: String
    }
  },
  methods: {
    toNextpage5(i) {
      if (i.is_publish) {
        this.$router.push({ path: `kechengy/${i.id}` });
      } else {
        this.$toast({ message: "敬请期待", duration: 1000 });
      }
    }
  }
};
</script>
<style scoped>
.sp li {
  padding: 12px 15px;
  border-bottom: 1px solid #bdc3ca;
  display: flex;
  justify-content: space-between;
}
.sp-left {
  width: 120px;
  height: 94px;
  border-radius: 5px;
  margin-right: 10px;
  overflow: hidden;
  position: relative;
}
.publish {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 16px;
}
.sp-left > img {
  width: 100%;
  height: 100%;
}
.sp-right {
  flex: 1;
  padding-right: 21.5px;
  position: relative;
  /* width: 300px; */
}
.sp-right h4 {
  font-size: 15px;
  color: #333333;
  font-weight: 500;
}
.sp-right span {
  /* font-size: 12px; */
  color: #606165;
  font-weight: 400;
}
.sp-right strong {
  font-weight: normal;
  color: #3f44eb;
}
.sp-right > div {
  font-size: 12px;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  margin-top: 9px;

  /* color: #fa2f19; */
}
.sp-right .preferential{
  font-size: 12px;
  color: #333333;
  line-height: 20px;
}
.sp-right .normal{
  font-size: 14px;
  color: #fa2f19;
  text-decoration:line-through;
}
</style>
